<template>
    <div class="xm-dialog" v-if="visible">
        <el-dialog :visible="true" :width="width" :show-close="false">
            <div slot="title">
                <p>{{title}}</p>
                <i class="icon el-icon-circle-close" @click="close"></i>
            </div>
            <slot></slot>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="handleClick('comfirm')">确 定</el-button>
                <el-button size="small" @click="handleClick('cancel')">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'xm-dialog',
    props: {
        visible: Boolean,
        title: {
            type: String,
            default: '提示',
        },
        width: {
            type: String,
            default: '700px'
        }
    },
    methods: {
        handleClick(eventName) {
            if (eventName === 'cancel') {
                this.$emit('update:visible', false);
            }
            this.$emit(eventName);
        },
        close() {
            this.$emit('update:visible', false);
            this.$emit('close');
        },
    },
};
</script>

<style scoped lang="less">
.xm-dialog{
    /deep/ .el-dialog__header{
        background-color: #000;
        color: #fff;
        text-align: center;
        position: relative;
        font-weight: bold;
        .icon{
            font-size: 20px;
            position: absolute;
            top: 20px;
            right: 20px;
        }
    }
    /deep/ .dialog-footer{
        margin: 0 auto;
        text-align: center;
    }
    .el-button + .el-button{
        margin-left: 100px;
    }
}
</style>
